<template>
  <div class="app-container">
    <el-page-header @back="$router.back()" />
    <!-- 订单信息 -->
    <el-card class="box-card mb20">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>

      <div class="content">
        <div>
          <div class="text item">
            <label>订单编号：</label>
            {{ orderInfo.orderNum }}
          </div>
          <div class="text item">
            <label>订单状态：</label>
            <el-tag :type="tradeStatusTag[orderInfo.tradeStatus]">{{
              tradeStatusKV[orderInfo.tradeStatus]
            }}</el-tag>
          </div>
          <div class="text item">
            <label>客户信息：</label>{{ orderInfo.mobile }}({{ orderInfo.name }})
          </div>
          <div class="text item"><label>创建时间：</label>{{ orderInfo.createTime }}</div>
          <!-- 交易状态，0:待支付，1:支付处理中，2:取消，3:完成 -->
          <div v-if="orderInfo.tradeStatus == 3">
            <div class="text item"><label>支付时间：</label>{{ orderInfo.payTime }}</div>
            <div class="text item">
              <label>支付方式：</label>{{ orderInfo.payChannel }}
            </div>
          </div>
          <div class="text item" v-if="orderInfo.tradeStatus == 2">
            <label>取消时间：</label>{{ orderInfo.modifyTime }}
          </div>
          <div class="text item"><label>凭证使用：</label>{{ orderInfo.certName }}</div>
        </div>
      </div>
    </el-card>

    <!-- 商品信息 -->
    <el-card class="box-card mb20">
      <div slot="header" class="clearfix">
        <span>商品信息</span>
      </div>
      <div>
        <div class="text item">
          <el-image
            style="height: 100px"
            fit="contain"
            :src="getFile(orderInfo.worksCover)"
          />
        </div>
        <div>
          <div class="text item"><label>商品名称：</label>{{ orderInfo.worksName }}</div>
          <div class="text item" v-if="orderInfo.buyType == 0">
            <label>艺术家：</label>{{ orderInfo.artUserName }}
          </div>
          <div class="text item">
            <label>权益属性：</label>{{ rightOptionsKV[orderInfo.tubeType] }}
          </div>
          <div class="text item"><label>单价：</label>{{ orderInfo.unitPrice }}</div>
          <div class="text item"><label>数量：</label>{{ orderInfo.buyNum }}</div>
          <div class="text item">
            <label>交易金额：</label>{{ orderInfo.orderAmount }}
          </div>
          <div class="text item" v-if="orderInfo.productIdNumberList">
            <label>作品编号：</label>
            {{ orderInfo.productIdNumberList.join(",") }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { findDetail } from "@/api/order";
import { getFile } from "@/utils";
import {
  tradeStatusKV,
  tradeStatusTag,
  payChannelOptionsKV,
  rightOptionsKV,
} from "@/utils/options";
export default {
  name: "OrderDetail",
  data() {
    return {
      orderInfo: {},
      id: 0,
      tradeStatusKV,
      tradeStatusTag,
      payChannelOptionsKV,
      rightOptionsKV,
    };
  },

  created() {
    this.id = this.$route.params && this.$route.params.id;
    this.findDetail(this.id);
  },
  methods: {
    // 作品详情
    async findDetail(id) {
      findDetail({ id }).then((res) => {
        this.orderInfo = res;
      });
    },

    // 艺术家详情

    getFile,
  },
};
</script>
